<template>
<div class="box">
    <div class="heade">
      <select class="col"><option>北京联合大学</option></select>
        <dl class="dl">
            <dd class="dd">去猜球<br>赢大奖</dd>
            <dt class="dt"><img src="@/assets/elm5.png"></dt>
        </dl>
    </div>
    <div class="ssk"> 
       <input type="text" placeholder="输入商家，商品名称" class="sou">
    </div>
   <div class="nav">
        <ul class="uls">
           <li>过桥米线</li>
           <li>饺子</li>
           <li>豆浆</li>
           <li>世界杯减30</li>
           <li>焦耳川式快餐</li>
           <li>蛋糕</li>
        </ul>
    </div>

    <div class="swiper-container lb">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="@/assets/elm7.png"></div>
            <div class="swiper-slide"><img src="@/assets/elm7.png"></div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
    </div>



    <div class="swiper-container cplb">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="ms">
                    <div class="dls">
                        <dl>
                            <dt><img src="@/assets/elm8.png"></dt>
                            <dd>美食</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm9.png"></dt>
                            <dd>早餐</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm10.png"></dt>
                            <dd>商超便利</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm11.png"></dt>
                            <dd>果蔬生鲜</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm12.png"></dt>
                            <dd>新店特惠</dd>
                        </dl>
                    </div>
                    <div class="dls">
                        <dl>
                            <dt><img src="@/assets/elm13.png"></dt>
                            <dd>美食</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm14.png"></dt>
                            <dd>大牌简餐</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm15.png"></dt>
                            <dd>医药健康</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm16.png"></dt>
                            <dd>甜品饮品</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm17.png"></dt>
                            <dd>披萨意面</dd>
                        </dl>
                    </div>
             </div> 
        
            </div>
            <div class="swiper-slide">
                <div class="ms">
                    <div class="dls">
                        <dl>
                            <dt><img src="@/assets/elm8.png"></dt>
                            <dd>美食</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm9.png"></dt>
                            <dd>早餐</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm10.png"></dt>
                            <dd>商超便利</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm11.png"></dt>
                            <dd>果蔬生鲜</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm12.png"></dt>
                            <dd>新店特惠</dd>
                        </dl>
                    </div>
                    <div class="dls">
                        <dl>
                            <dt><img src="@/assets/elm13.png"></dt>
                            <dd>美食</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm14.png"></dt>
                            <dd>大牌简餐</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm15.png"></dt>
                            <dd>医药健康</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm16.png"></dt>
                            <dd>甜品饮品</dd>
                        </dl>
                        <dl>
                            <dt><img src="@/assets/elm17.png"></dt>
                            <dd>披萨意面</dd>
                        </dl>
                    </div>
             </div> 
            </div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
    </div>


       <div class="swiper-container lunbo">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="@/assets/elm19.png"></div>
            <div class="swiper-slide"><img src="@/assets/elm19.png"></div>
            <div class="swiper-slide"><img src="@/assets/elm19.png"></div>
            <div class="swiper-slide"><img src="@/assets/elm19.png"></div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
    </div>            
    
</div>

</template>

<script>
export default {
  name: 'box',
     mounted(){
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:2000,
          loop:true,
         pagination: {
                    el: '.swiper-pagination',
                },
        })
      },
}
</script>
<style lang="less">
.px2rem(@name, @px){
    @{name}:  @px / 75 * 1rem;
}
    .box{
        margin:0;
    }
    .heade{
        background:#0289ff;
        display: flex;
        justify-content:space-between;
        align-items:center;
         .px2rem(height, 127);
    }
    .col{
        background:#0289ff;
        color:#fff;
        padding-left: 2%;
        .px2rem(font-size, 25);
        border:none;
    }
    .dl{
        display:flex;
        justify-content:center;
        align-items:center;
        }
    .dd{
        color:#fff;
        .px2rem(font-size,20);
    }
    dt img{
        .px2rem(height,58);
    }
    .ssk{
        display:flex;
        justify-content:center;
        background:#0289ff;
    }
    .sou{
        width:90%;
        .px2rem(height, 70);
        text-align:center;
    }
    .nav{
        background:#0289ff;  
        display:flex;
        justify-content:center;      
    }
    .uls{
        width:90%;
        display: flex;
       .px2rem(height,70);
       align-items:center;
       text-align:center;
    }
    .uls li{
        flex:1;
        color:#fff; justify-content:cender;
        .px2rem(font-size,22);
    }
    .lb{
        width:100%;
    }
   .lb  img{
        width:100%;
    }
    .cplb{
        .px2rem(height,330);
        // overflow:hidden;
        .px2rem(height,400);
    } 
    .ms{
       width:100%;
       text-align:center;
    }
    .dls{
        display: flex;
         width:100%;
        justify-content:center;
        align-items:centent;
    }
    .dls dl{
       flex:1;
       .px2rem(padding,40);
    }
    .dls dl dd{
        .px2rem(font-size,25);
    }
    .lunbo{
        width:90%;
        // .px2rem(height,180);
        text-align:center;
        // .px2rem(padding-bottom,100);
    }
    .lunbo img{
        width:100%;
    }
</style>
